<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			#d2{
				width: 300px;
				height: 50px;
				background-color: yellow;
			}
			#d3{
				width: 300px;
				height: 50px;
				background-color: blue;
			}
			#d4{
				width: 200px;
				height: 200px;
				background-color: violet;
			}
		</style>
	</head>
	<body>
		<button type="button" id="b1" onclick="bb1()">b1</button>
		<button type="button" id="b2">b2</button>
		<button type="button" id="b3">b3</button>
		<div id="d1" onclick="dd1()" onmouseenter="dd2()" onmouseleave="dd5()" onmousemove="dd8()"></div>
		<div id="d2"></div>
		<div id="d3"></div>
		姓名：<input type="text" name="" id="username" value="" onfocus="i1()" onblur="i2()" />
		<br/>
		密码：<input type="password" name="" id="userpass" value="" onfocus="i3()" onblur="i4()" />
		<br/>
		<button type="button" onclick="i5()">提交</button>
		<div id="d4"></div>
		<button type="button" id="b4" onclick="aa()">添加</button>
		<button type="button" id="b5" onclick="aaa()">删除</button>
	</body>
	<script type="text/javascript">
		function bb1(){
			console.log('单击我，不然有你好果子吃！');
		}
		document.getElementById('b2').onclick = bb1;
		document.getElementById('b3').addEventListener('click',bb1);
		function dd1(){
			console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
		}
		document.getElementById('d2').onclick = dd1;
		document.getElementById('d3').addEventListener('click',dd1);
		function dd2(){
			document.getElementById('d1').style.backgroundColor = 'green';
		}
		function dd3(){
			document.getElementById('d2').style.backgroundColor = 'slateblue' ;
		}
		document.getElementById('d2').onmouseenter = dd3;
		function dd4(){
			document.getElementById('d3').style.backgroundColor = 'turquoise';
		}
		document.getElementById('d3').addEventListener('mouseenter',dd4);
		function dd5(){
			document.getElementById('d1').style.backgroundColor = 'red';
		}
		function dd6(){
			document.getElementById('d2').style.backgroundColor = 'yellow' ;
		}
		document.getElementById('d2').onmouseleave = dd6 ;
		function dd7(){
			document.getElementById('d3').style.backgroundColor = 'blue' ;
		}
		document.getElementById('d3').addEventListener('mouseleave',dd7) ;
		function dd8(){
			console.log('111111111111111111');
		}
		function dd9(){
			console.log('222222222222222222');
		}
		document.getElementById('d2').onmousemove = dd9 ;
		function dd10(){
			console.log('333333333333333333');
		}
		document.getElementById('d3').addEventListener('mousemove' , dd10) ;
		function i1(){
			console.log('用户正在输入！！！');
		}
		function i2(){
			if(document.getElementById('username').value.length < 1){
				console.log('请输入用户名！！！');
			}
			console.log(document.getElementById('username').value.length)
		}
		function i3(){
			console.log('用户正在输入！！！');
		}
		function i4(){
			if(document.getElementById('userpass').value.length < 1){
				console.log('请输入密码！！！');
			}
		}
		function i5(){
			if(document.getElementById('username').value.length < 1 && document.getElementById('userpass').value.length < 1){
				alert('请输入用户名和密码！！！');
			}
			if(document.getElementById('username').value.length > 0 && document.getElementById('userpass').value.length < 1){
				alert('请输入密码！！！');
			}
			if(document.getElementById('username').value.length < 1 && document.getElementById('userpass').value.length > 0){
				alert('请输入用户名！！！');
			}
		}
		function a(){
			console.log('我在动，我在动！');
		}
		function aa (){
			document.getElementById('d4').addEventListener('mousemove' , a);
		}
		function aaa(){
			document.getElementById('d4').removeEventListener('mousemove' , a);
		}
	</script>
</html>
